<template>
	<div id="menus">
		<van-nav-bar title="菜单"></van-nav-bar>
		<div class="address">
			<div class="address_left">
				<div class="shop">
					<van-icon name="location-o" size="21" />
					<p >硕果时代购物中心店</p>
				</div>
				<div class="distance">
					<p class="distance_left">距你5km |</p>
					<p class="distance_right">高新五路与纵六路交叉口东北角九木集团11栋高亿科技</p>
				</div>
			</div>
			<div class="address_right">
				<div class="mode">
					<div class="ziqu">自取</div>
					<div class="waimai">外卖</div>
				</div>
			</div>
		</div>
		<menuDetail></menuDetail>
		<!-- <van-submit-bar :price="3050" button-text="加入购物车" @submit="">
			<template #default>
			    <van-icon name="shopping-cart-o" size="25" color="#FF5809" badge="3" />
			  </template>
		</van-submit-bar> -->
		<tabbar></tabbar>
	</div>
</template>

<script>
	import menuDetail from '@/components/menu/menu_detail'
	import tabbar from '@/components/tabbar.vue'
	export default {
		name: 'menus',
		data(){
			return{
				
			}
		},
		components:{
			menuDetail,
			tabbar
		}
	}
</script>

<style scoped="scoped">
	#menus{
		width: 100%;
		/* height: auto; */
	}
	.van-nav-bar{
		position: fixed;
		width: 100%;
	}
	.address{
		display: flex;
		width: 100%;
		height: 1.8333rem;
		padding: 0.2rem;
		background-color: #F0F0F0;
		float: left;
		margin-top: 1.1rem;
		border-bottom: 0.0133rem solid #d3d3d3;
		margin-bottom: 0.2666rem;
	}
	.address_left{
		width: 70%;
		display: flex;
		flex-direction: column;
	}
	.shop{
		flex: 1;
	}
	.shop i{
		float: left;
		width: 8%;
		margin-top: 0.0333rem;
	}
	.shop p{
		margin: 0;
		width: 88%;
		font-size: 0.64rem;
		white-space:nowrap; /*文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.4066rem;
	}
	.distance{
		flex: 1;
	}
	.distance_left{
		width: 21%;
		margin: 0;
		float: left;
	}
	.distance_right{
		width: 79%;
		margin: 0;
		white-space:nowrap;/* 文本不换行 */
		overflow: hidden;
		text-overflow: ellipsis;/* 超出宽度显示为省略号 */
	}
	.address_right{
		width: 30%;
		color: 	#BEBEBE;
	}
	.mode{
		margin: 0.2366rem;
		height: 0.65rem;
		line-height: 0.65rem;
		border-radius: 0.4rem;
		background-color: white;
	}
	.ziqu{
		width: 50%;
		height: 100%;
		float: left;
		background-color: #cc0033;
		text-align: center;
		border-radius: 0.4rem;
		color: white;
	}
	.waimai{
		width: 50%;
		height: 100%;
		float: left;
		text-align: center;
		border-radius: 0.4rem;
	}
	.van-submit-bar{
		background-color: #F0F0F0;
		bottom: 1.2033rem;
	}
</style>
